 <template>
   <div class="videoInfo">
     <div class="videoDiv">
       <h2>{{videoInfo.videoName}}</h2>
       <br><br><br>
       <video width="750"  controls="controls">
          <!-- <source src="videoInfo.videoPath" type="video/ogg"> -->
          <source :src="videoInfo.videoPath" type="video/mp4">
          <!-- <source src="videoInfo.videoPath" type="video/mp4"> -->
            Your browser does not support the video tag.
        </video>
     </div>
     <div class="project">
       <el-form  ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
          <el-form-item label="提问" prop="desc" >
            <el-input type="textarea"   v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
     </div>
   </div>
 </template>
<style>

  .project{
    width: 750px;
    height: 800px;
    margin-top: 100px;
  }
  .videoInfo{
    text-align: center;
    width: 800px;
    height: 900px;
    margin: 50px auto;
    padding-top: 50px;
    border-style: double;
    border-width: 10px;
    border-color: lightgray;
    border-radius: 50px;
  }
  *{
    margin: 0;
  }

</style>
 <script>
 import {downloadVideo} from '@/axios/api'
 export default {
   data() {
     return {
       videoInfo: '',
       ruleForm: {
          desc: ''
        },
       rules:{
         desc:[
           { required: true, message: '请填写你的提问', trigger: 'blur'}
         ]
       }
     }
   },
   methods:{
     getVideoMsg:function() {
     	let vId  = this.$route.params.videoId
     	if(vId == null) {
     		vId = 1;
     	}
       let para = {
         videoId: vId
       };
       console.log('videoId===' + para.videoId)
       downloadVideo(para).then(res => {
         if(res.status == 200){
           this.videoInfo = res.resData;
         }else{
           this.$message({
             showClose: true,
             message: res.message,
             type: 'error'
           });
         }

       })
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.$notify({
             title: '成功',
             message: '您的问题已提交，教师会尽快回复',
             type:'success',
             offset: 100
           });
         } else {
           // this.$notify.error({
           //   title: '失败',
           //   message: '提交失败，请填写信息',
           //   offset: 100
           // });
           return false;
         }
       });

     },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
   },
   mounted(){
     this.getVideoMsg();
   }
 }

 </script>
